<script type="text/javascript" src="../js/ajaxfileupload.js"></script>

<script type="text/javascript">
    $(function(){
        $('#cityid').combobox({
            url:'get_city.php',
            valueField:'id',
            textField:'city'
        });
        
        $('#isspecialoffer').combobox({
            url:'yesno_value.json',
            valueField:'id',  
            textField:'text' 
        });
        
        $('#featured').combobox({
            url:'yesno_value.json',
            valueField:'id',  
            textField:'text' 
        });

        $('#monthStart').combobox({
            url:'get_month.php',
            valueField:'id',
            textField:'monthname'
        });
        
        $('#yearStart').combobox({
            url:'get_year.php',
            valueField:'id',
            textField:'year'
        });
        
        $('#monthEnd').combobox({
            url:'get_month.php',
            valueField:'id',
            textField:'monthname'
        });
        
        $('#yearEnd').combobox({
            url:'get_year.php',
            valueField:'id',
            textField:'year'
        });
        
        $('#dest_id').combobox({
            url:'get_destination.php',
            valueField:'id',
            textField:'country'
        });
        
        $('#cat_id').combobox({
            url:'get_category.php',
            valueField:'id',
            textField:'package'
        });
        
        $('#tr_embassyid').combobox({
            url:'get_embassy.php',
            valueField:'id',
            textField:'embassy'
        });
    });

    function getFileExtension(filename) 
    { 
        if( filename.length == 0 ) return ""; 
        var dot = filename.lastIndexOf("."); 
        if( dot == -1 ) return ""; 
        var extension = filename.substr(dot + 1,filename.length); 
        return extension; 
    }
    
    function uploadFile(elementId)
    {
        var allowedExt = ['pdf'];
        var ext = getFileExtension($('#' + elementId).val());
        if(ext == '') {
            alert('Please select file first');
            return false;
        }
        
        if($.inArray(ext, allowedExt) < 0) {
            alert('File extension is not allowed');
            return false;
        }
        
        $("#loading")
        .ajaxStart(function(){
            $(this).show();
        })
        .ajaxComplete(function(){
            $(this).hide();
        });
        
        $.ajaxFileUpload ({
            url:'upload_file.php',
            secureuri:false,
            fileElementId:'postedFile',
            dataType: 'json',
            data:{elementid:elementId, uploadfolder:'uploaded/pdf/'},
            success: function (data, status) {
                if(typeof(data.error) != 'undefined') {
                    if(data.error != '') {
                        alert(data.error);
                    } else {
                        $('#pdf_attachment').val('backend/'+data.msg);
                    }
                }
            },
            error: function (data, status, e) {
                alert(e);
            }
        })
        return false;
    }

    function uploadImage(elementId)
    {
        var allowedExt = ['jpg','jpeg','gif','png','bmp'];
        var ext = getFileExtension($('#' + elementId).val());
        if(ext == '') {
            alert('Please select file first');
            return false;
        }

        if($.inArray(ext, allowedExt) < 0) {
            alert('File extension is not allowed');
            return false;
        }

        $("#loading")
        .ajaxStart(function(){
            $(this).show();
        })
        .ajaxComplete(function(){
            $(this).hide();
        });

        $.ajaxFileUpload ({
            url:'upload_file.php',
            secureuri:false,
            fileElementId:'postedImage',
            dataType: 'json',
            data:{elementid:elementId, uploadfolder:'uploaded/packages/'},
            success: function (data, status) {
                if(typeof(data.error) != 'undefined') {
                    if(data.error != '') {
                        alert(data.error);
                    } else {
                        $('#imagedisplay').val('backend/'+data.msg);
                    }
                }
            },
            error: function (data, status, e) {
                alert(e);
            }
        })
        return false;
    }

    function loadImage() {
        
    }
    
    
    $.extend($.fn.validatebox.defaults.rules, {  
        minLength: {  
            validator: function(value, param){  
                return value.length >= param[0];  
            },  
            message: 'Please enter at least {0} characters.'  
        },
        maxLength: {  
            validator: function(value, param){  
                return value.length <= param[0];  
            },  
            message: 'Please enter max {0} characters.'  
        }
    }); 
</script>


<div id="tt" class="easyui-tabs">  
    <div title="General" style="padding:20px;">  
        <div class="fitem">
            <label>ID:</label>
            <input name="id" class="easyui-validatebox" readonly="true" />
        </div>
        
        <div class="fitem">
            <label>Title:</label>
            <input name="title" class="easyui-validatebox" required="true" />
        </div>
        <div class="fitem">
            <label>Short Title:</label>
            <input name="short_title" data-options="validType:'maxLength[58]'" class="easyui-validatebox" required="true" />
        </div>
        <div class="fitem">
            <label>Start from:</label>
            <input id="cityid" name="cityid" style="width:100px" required="true" />
        </div>
        <div class="fitem">
            <label>Period:</label>
            <input id="monthStart" name="monthstart" style="width:100px" required="true" />
            <input id="yearStart" name="yearstart" style="width:100px" required="true" />

            <input id="monthEnd" name="monthend" style="width:100px" required="true" />
            <input id="yearEnd" name="yearend" style="width:100px" required="true" />
        </div>
        <div class="fitem">
            <label>Price start from:</label>
            <input name="currency" class="easyui-validatebox" style="width:20px" required="true" />
            <input name="pricestart" class="easyui-validatebox" style="width:80px; text-align: right;" required="true" />
        </div>
        <div class="fitem">
            <label>Destination:</label>
            <input id="dest_id" name="dest_id" style="width:300px" required="true" />
        </div>
        <div class="fitem">
            <label>Package Category:</label>
            <input id="cat_id" name="cat_id" style="width:300px" required="true" />
        </div>
        <div class="fitem">
            <label>Special offer:</label>
            <input id="isspecialoffer" name="isspecialoffer" style="width:100px" required="true" />
        </div>
        <div class="fitem">
            <label>Featured:</label>
            <input id="featured" name="featured" style="width:100px" required="true" />
        </div>


        <div class="fitem">
            <label>PDF attachment:</label>
            <input name="pdf_attachment" id="pdf_attachment" type="text" />
        </div>
        <table border="0" width="80%">
            <tr>
                <td width="25%" style="border: none;">
                    <label>&nbsp;</label>
                </td>

                <td style="border: none;">
                    <form id="pdf_form" action="upload_file.php" method="post" enctype="multipart/form-data">
                        <input type="file" id="postedFile" name="postedFile" style="width: 250px;" />
                        <input type="button" 
                               style="width: 50px;" 
                               name="upload" 
                               value="Upload" 
                               onclick="uploadFile('postedFile');" />
                        <img id="loading" src="../images/loading.gif" style="display:none;" />
                    </form>
                </td>
            </tr>
        </table>

        <div class="fitem">
            <label>Display picture:</label>
            <input name="imagedisplay" id="imagedisplay" type="text" />
        </div>
        <table border="0" width="80%">
            <tr>
                <td width="25%" style="border: none;">
                    <label>&nbsp;</label>
                </td>

                <td style="border: none;">
                    <form id="img_form" action="upload_file.php" method="post" enctype="multipart/form-data">
                        <input type="file" id="postedImage" name="postedImage" style="width: 250px;" />
                        <input type="button"
                               style="width: 50px;"
                               name="upload"
                               value="Upload"
                               onclick="uploadImage('postedImage');" />
                        <img id="loading" src="../images/loading.gif" style="display:none;" />
                    </form>
                </td>
            </tr>
        </table>
    </div>  
    <div title="Overview" style="padding:20px;">
        <div class="fitem">
            <label style="vertical-align: top; padding-top: 20px;">Overview Title:</label>            
            <textarea name="ov_title" id="ov_title" style="width: 70%; height: 100px; padding: 0;"></textarea>
        </div>
        <div class="fitem">
            <label style="vertical-align: top; padding-top: 20px;">Overview Period:</label>            
            <textarea name="ov_period" style="width: 70%; height: 100px; padding: 0;"></textarea>
        </div>        
        <div class="fitem">
            <label style="vertical-align: top; padding-top: 20px;">Bonus:</label>            
            <textarea name="ov_bonus" style="width: 70%; height: 100px; padding: 0;"></textarea>
        </div>
        <div class="fitem">
            <label style="vertical-align: top; padding-top: 20px;">Highlight:</label>            
            <textarea name="ov_highlight" style="width: 70%; height: 100px; padding: 0;"></textarea>
        </div>
        <div class="fitem">
            <label style="vertical-align: top; padding-top: 20px;">Notice:</label>            
            <textarea name="ov_notice" style="width: 70%; height: 100px; padding: 0;"></textarea>
        </div>
    </div>
    <div title="Itinerary" style="padding:20px;">
        Please use "Itineraries" from toolbar to edit itineraries
    </div>

    <div title="Dates & Prices" style="padding:20px;">
        <div class="fitem">
            <label>Price label:</label>
            <input name="da_pricelabel" class="easyui-validatebox" />
        </div>
        
        <div class="fitem">
            <label>Prices:</label>
            <textarea name="da_pricetable" style="width: 70%; height: 100px; padding: 0;"></textarea>
        </div>

        <div class="fitem">
            <label style="vertical-align: top; padding-top: 20px;">Departure dates:</label>
            <textarea name="da_depdates" style="width: 70%; height: 100px; padding: 0;"></textarea>
        </div>

        <div class="fitem">
            <label style="vertical-align: top; padding-top: 20px;">Extra prices:</label>
            <textarea name="da_extraprice" style="width: 70%; height: 100px; padding: 0;"></textarea>
        </div>

    </div>

    <div title="Travel Documents" style="padding:20px;">
        <div class="fitem">
            <label>Select Embassy:</label>
            <input id="tr_embassyid" name="tr_embassyid" style="width:300px" />
        </div>
    </div>
</div>